<template>
  <div class="container">
    <el-card>
      <div>
        <div class="header">
          <el-alert
            title="说明: 目前支持学科和关键字条件筛选"
            type="error"
            :closable="false"
            class="alert"
          >
          </el-alert>
          <el-button class="add" type="success" @click="addQs"
            ><i class="el-icon-edit" />新增试题</el-button
          >
        </div>
        <!-- 表单部分 -->
        <el-form class="form" label-width="100px" ref="form" :model="form">
          <el-form-item label="学科">
            <el-select
              v-model="form.subjectID"
              placeholder="请选择"
              @focus="getsubject"
              @change="getSecSubjs"
            >
              <el-option
                v-for="item in subjects"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select v-model="form.second" placeholder="请选择">
              <el-option
                v-for="item in secondSubjs"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="form.tags" placeholder="请选择">
              <el-option
                v-for="item in tagsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input
              v-model="form.keyword"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题类型">
            <el-select v-model="form.questionType" placeholder="请选择">
              <el-option value="1">单选</el-option>
              <el-option value="2">多选</el-option>
              <el-option value="3">简答</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select v-model="form.difficulty" placeholder="请选择">
              <el-option value="1">简单</el-option>
              <el-option value="2">一般</el-option>
              <el-option value="3">困难</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option
                v-for="item in direction"
                :key="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select v-model="form.creator" placeholder="请选择">
              <el-option label="超级管理员" value="2" />
              <el-option label="录入管理员" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select
              v-model="form.province"
              placeholder="请选择"
              style="width: 50%"
            >
              <el-option
                v-for="(item, index) in provinces"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              v-model="form.city"
              placeholder="请选择"
              style="width: 50%"
            >
              <el-option
                v-for="(item, index) in citys"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表单部分end -->

      <!-- 内容部分 -->
      <div>
        <el-col :span="24">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待审核" name="second"></el-tab-pane>
            <el-tab-pane label="已审核" name="third"></el-tab-pane>
            <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
          </el-tabs>
        </el-col>

        <el-alert
          style="margin-bottom: 20px"
          type="info"
          :closable="false"
          show-icon
        >
          数据一共{{ counts }}条
        </el-alert>
      </div>
      <el-table :data="list">
        <el-table-column label="试题编号" prop="number" width="120px">
        </el-table-column>
        <el-table-column label="学科" prop="subject" />
        <el-table-column label="目录" prop="catalog" />
        <el-table-column label="题型" prop="questionType">
          <template v-slot="{ row }">
            <span>{{ row.questionType | TypeQuestion }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="200px">
          <template v-slot="{ row }">
            <span v-html="handleRichHtmlImg(row.question)"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          prop="addDate"
          :formatter="formatterTime"
          width="200px"
        />
        <el-table-column label="难度" prop="difficulty">
          <template v-slot="{ row }">
            <span>{{ row.difficulty | difficult }}</span>
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator" width="120px" />
        <el-table-column label="审核状态" prop="chkState">
          <template v-slot="{ row }">
            <span>{{ row.chkState | checkT }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核意见" prop="chkRemarks" width="120px" />
        <el-table-column label="审核人" prop="chkUser" width="120px" />
        <el-table-column label="发布状态" prop="publishState">
          <template v-slot="{ row }">
            <span v-if="row.chkState === 1">{{
              { 0: '已下架', 1: '已发布', 2: '已下架' }[row.publishState]
            }}</span>
            <span v-if="row.chkState !== 1">待发布</span>
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column label="操作" width="220" fixed="right">
          <template v-slot="{ row }">
            <el-button type="text" size="mini" @click="lookEvent(row)"
              >预览</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="auditEvent(row)"
              :disabled="
                row.chkState === 1 || row.chkState === 2 ? true : false
              "
              >审核</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="modify(row.id)"
              :disabled="row.publishState === 1 ? true : false"
              >修改</el-button
            >
            <el-button
              v-if="row.publishState === 1"
              type="text"
              size="mini"
              @click="publish(row)"
              >下架</el-button
            >
            <el-button
              v-if="row.publishState === 0 || row.publishState === 2"
              type="text"
              size="mini"
              @click="publish(row)"
              >上架</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="deleteEvent(row.id)"
              :disabled="row.publishState === 1 ? true : false"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <!-- 操作按钮end -->
      </el-table>
      <div class="page">
        <!-- 分页 -->
        <el-pagination
          background
          :current-page="page.page"
          :page-sizes="[1, 5, 10, 20, 30, 40, 50]"
          :page-size="page.pagesize"
          layout=" prev, pager, next,sizes, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- 分页end -->
      </div>
    </el-card>
    <!-- 组件 -->
    <publishBtn
      ref="publishBtn"
      :pubData="pubData"
      @getData="getData"
    ></publishBtn>
    <Audit ref="audit" :auditData="auditData" @getData="getData" />
    <Look ref="look" :data="lookData" />
  </div>
</template>

<script>
// api
import { choice, remove } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as tagList } from '@/api/hmmm/tags.js'
import { simple as secSubjs } from '@/api/hmmm/directorys.js'
import dayjs from 'dayjs'
// 枚举
import { chkType, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
// 组件
import publishBtn from '../components/choice-components/publishBtn.vue'
import Audit from '../components/choice-components/audit.vue'
import Look from '../components/choice-components/look.vue'
export default {
  components: { publishBtn, Audit, Look },
  data () {
    return {
      provinces: provinces(),
      direction,
      lookData: '',
      disabled: false,
      auditData: '',
      pubData: '',
      subjects: [],
      form: {
        subjectID: '',
        second: '',
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creator: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业所在省份
        city: '' // 企业所在城市
      },
      activeName: 'first',
      list: [],
      counts: 0,
      page: {
        page: 1,
        pagesize: 10
        // chkState: null
      },
      subjectVal: '',
      // 二级目录
      secondSubjs: [],
      // 标签
      tagsList: []
    }
  },
  created () {
    this.getData()
  },
  computed: {
    citys () {
      return citys(this.form.province)
    }
  },
  // 过滤器
  filters: {
    checkT (val) {
      const arr = chkType.filter(item => {
        // console.log(val, item.value)
        return item.value === val - 0
      })
      if (arr[0] === undefined) {
        return ''
      }
      return arr[0].label
    }
  },
  methods: {
    // 图片过滤器
    handleRichHtmlImg: function (html) {
      const replacedHtml = html.replace(/<?img[^>]*?>/g, str => {
        const matchArr = str.match(/src="(.*?)"/) || []
        const imgSrc = matchArr[1] || ''
        // 这里替换显示的内容根据需求而定
        const defaultImg =
          '<img class="img-icon" src="https://ae01.alicdn.com/kf/H9a480ccb053d43ff89ed22a89982337dB.png" data-img-src=' +
          imgSrc +
          ' />'
        str = str.replace(/<(img).*?>/g, defaultImg)
        return str
      })
      return replacedHtml
    },
    // 新增试题
    addQs () {
      this.$router.push('/questions/new')
    },
    // 过滤审核状态函数
    checkTp (val) {
      const arr = chkType.filter(item => {
        return item.label === val
      })
      if (arr[0] === undefined) {
        return ''
      }
      return arr[0].value
    },
    // tab切换
    handleClick (tab, event) {
      if (tab.label === '全部') {
        this.page = { page: 1, pagesize: 10 }
        this.getData()
        if (!this.form.subjectID && !this.form.keyword) {
          this.getData()
        } else if (this.form.subjectID) {
          this.page = { ...this.page, subjectID: this.form.subjectID }
          this.getData()
        } else if (this.form.keyword) {
          this.page = { ...this.page, keyword: this.form.keyword }
          this.getData()
        } else if (this.form.subjectID && this.form.keyword) {
          this.page = {
            ...this.page,
            keyword: this.form.keyword,
            subjectID: this.form.subjectID
          }
          this.getData()
        }
      }
      // console.log(tab, event)
      const chkState = this.checkTp(tab.label)
      this.page = { ...this.page, chkState: chkState }
      if (!this.form.subjectID && !this.form.keyword) {
        this.getData()
      } else if (this.form.subjectID) {
        this.page = { ...this.page, subjectID: this.form.subjectID }
        this.getData()
      } else if (this.form.keyword) {
        this.page = { ...this.page, keyword: this.form.keyword }
        this.getData()
      } else if (this.form.subjectID && this.form.keyword) {
        this.page = {
          ...this.page,
          keyword: this.form.keyword,
          subjectID: this.form.subjectID
        }
        this.getData()
      }
      // this.list = res.data.items
      // this.counts = res.data.items.length
    },
    async handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      this.page.page = 1
      this.getData()
    },
    async handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.page = val
      this.getData()
    },
    // 获取详情列表
    async getData () {
      const res = await choice(this.page)
      this.list = res.data.items
      this.counts = res.data.counts
      console.log(res, '详情列表')
    },
    // 时间过滤器
    formatterTime (row, column, cellValue, index) {
      // console.log(cellValue)
      return dayjs(cellValue).format('YYYY-MM-DD')
    }, // 获取学科
    async getsubject () {
      const res = await simple()
      this.subjects = Object.values(res.data)
      // console.log(this.subjects, '000')
      // console.log(res, '学科 ')
    },
    // 获取二级目录
    async getSecSubjs (e) {
      const res1 = await secSubjs({
        subjectID: e
      })
      this.secondSubjs = res1.data
      const res2 = await tagList({ subjectID: e })
      this.tagsList = res2.data
    },
    // 获取标签列表
    // 置空表单数据
    clear () {
      this.form = {
        subjectID: null,
        second: null,
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creator: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 企业所在省份
        city: null // 企业所在城市
      }
      this.page = { page: 1, pagesize: 10 }
      this.getData()
    },
    // 搜索按钮
    async search () {
      if (!this.form.subjectID && !this.form.keyword) {
        this.getData()
      } else if (this.form.subjectID && this.form.keyword) {
        this.page = {
          ...this.page,
          keyword: this.form.keyword,
          subjectID: this.form.subjectID
        }
        this.getData()
      } else if (this.form.subjectID) {
        delete this.page.keyword
        this.page = { ...this.page, subjectID: this.form.subjectID }
        this.getData()
      } else if (this.form.keyword) {
        this.page = { ...this.page, keyword: this.form.keyword }
        this.getData()
      }
    },
    // 发布
    publish (row) {
      this.pubData = row
      // console.log(this.pubData, '777')
      this.$refs.publishBtn.isShow = true
    },
    // 修改
    modify (id) {
      this.$router.push('/questions/new/?id=' + id)
    },
    // 审核
    auditEvent (row) {
      this.auditData = row
      this.$refs.audit.isShow = true
    },
    // 预览
    lookEvent (row) {
      this.lookData = row
      this.$refs.look.isShow = true
    },
    // 删除
    deleteEvent (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示')
        .then(async () => {
          await remove({
            id: id
          })
          this.$message.success('删除成功！')
          this.getData()
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 15px;
  .header {
    display: flex;
    .alert {
      background-color: #fff;
      text-align: left;
    }
  }
  .form {
    .el-form-item {
      float: left;
      width: 25%;
      margin-top: 20px;
    }
  }
  .page {
    margin: 25px 0;
    text-align: right;
  }
}
::v-deep .img-icon {
  width: 20px;
}
</style>
